templateViewInit = ()=>{

    searchFormInfo();
    // 已知数据渲染
    var inst = table.render({
        elem: '#role-list',
        id:'role-list-id',
        height: '#content-body-150',
        url: top.tools.getBaseUrl()+'/role/getPage',
        method: 'post',
        headers:{
            'Access-Token':top.tools.cookie.token(),
            'Content-Type':'application/json',
        },
        toolbar: '#dictToolbar',
        defaultToolbar: ['filter', 'exports', 'print', { // 右上角工具图标
            title: '提示',
            layEvent: 'LAYTABLE_TIPS',
            icon: 'layui-icon-tips',
            onClick: function (obj) { // 2.9.12+
                layer.alert('自定义工具栏图标按钮');
            }
        }],
        cols: [
            [
                {type: 'checkbox', width: 50},
                {type: 'numbers', title: '序号', align: 'center', width: 80},
                {field: 'name', title: '角色名称', align: 'left', width: 200},
                {field: 'code', title: '角色权限', align: 'left',width: 150},
                {field: 'sort', title: '角色排序', align: 'center',width: 100},
                {field: 'status', title: '状态', align: 'center',width: 100,templet:function (d){
                        return '<input type="checkbox" name="status" id="'+d.id+'" value="'+d.status+'" ' +
                            'title="启用|停用" lay-skin="switch" lay-filter="role-status" '+( d.status ? "checked" : "" )+'>';
                    }},
                {field: 'type', title: '角色类型', align: 'center',width: 100,templet:function (d){
                        let type = top.tools.dict().getDictLabel('system_role_type',d.type)
                        return type;
                    }},
                {field: 'dataScope', title: '数据范围', align: 'center',width: 120},
                {field: 'remark', title: '备注', align: 'left',minWidth: 100},
                {field: 'createTime', title: '创建时间', align: 'center',width: 160,templet:function (d){
                        return top.tools.form.formatDate(d.createTime);
                    }},
                {type: 'resources', title: '资源', align: 'center', width: 80,templet: function (d){
                    return '<a href="javascript:;" class="a-name" onclick="openResourcesData(\''+d.id+'\')" >'+d.resources+'</a>';
                    }},
                {fixed: 'right', title: '操作', align: 'center',  width: 170, toolbar: '#barDemo'}
            ]
        ],
        parseData: dataToFormat,
        data:[
            {id:1,name:'用户性别',type:'system_user_sex',status:'0',remark:'',createTime:'2021-01-05 17:03:48'}
        ],
        //skin: 'line', // 表格风格
        //even: true,
        page: true, // 是否显示分页
        limits: [15, 20, 30,50],
        limit: 15, // 每页默认显示的数量
        done: function (res, curr, count) {
            $(".layui-table th[data-field=" + 0 + "] .layui-table-cell").html("");
        }
    });
    // 工具栏事件
    table.on('toolbar(role-list)', function (obj) {
        var id = obj.config.id;
        var checkRow = table.checkStatus(id);
        if (checkRow.data.length<=0 && obj.event !== 'add'){
            layer.msg("请选择数据！");
            return
        }
        var data = checkRow.data;
        if (obj.event === 'add') {
            openForm({
                title:"新增角色",
                btn:1,
                save:(closeid)=>{
                    formFun.save(inst,closeid)
                },
                reset:(closeid)=>{
                    form.val('role_form', top.tools.form.getFindElementOnObj("#lay-role-form",false));
                },
                before:(index,layero,that,isEdit)=>{
                    workdbFieldConvert(document.querySelectorAll('#lay-role-form .dict-module'),isEdit);
                    form.val('role_form', {
                        sort:table.cache['role-list-id'].length+1,
                        status:true
                    });
                },
                area:'40%'
            },'role_form')
        } else if (obj.event === 'view') {
            openForm({
                title:"查看角色",
                btn:-1,
                area:'40%',
                before:(index,layero,that,isEdit)=>{
                    workdbFieldConvert(document.querySelectorAll('#lay-role-form .dict-module'),isEdit);
                    form.val('role_form', data);
                }
            },'role_form')
        } else  if (obj.event === 'del') {
            openConfirm(()=>{
                formFun.remove(data,inst)
            });
        }
    });
    // 触发单元格工具事件
    table.on('tool(role-list)', function (obj) { // 双击 toolDouble
        var data = obj.data; // 获得当前行数据
        if (obj.event === 'edit') {
            openForm({
                title:"编辑角色",
                btn:1,
                save:(closeid)=>{
                    formFun.save(inst,closeid)
                },
                reset:(closeid)=>{
                    form.val('role_form', top.tools.form.getFindElementOnObj("#lay-role-form",false));
                },
                area:'40%',
                before:(index,layero,that,isEdit)=>{
                    workdbFieldConvert(document.querySelectorAll('#lay-role-form .dict-module'),isEdit);
                    formFun.setValue(data,'role_form')
                }
            },'role_form')
        } else if (obj.event === 'view') {
            openForm({
                title:"查看角色",
                btn:-1,
                area:'40%',
                before:(index,layero,that,isEdit)=>{
                    workdbFieldConvert(document.querySelectorAll('#lay-role-form .dict-module'),isEdit);
                    formFun.setValue(data,'role_form')
                }
            },'role_form')
        } else if (obj.event === 'del') {
            openConfirm(()=>{
                formFun.remove(data,inst)
            });
        }
    });


    queryButton('role-list-id');
    formReset();
    // 状态 - 开关操作
    form.on('switch(role-status)', function(obj){
        let data = {
            id:$(obj.elem).attr("id"),
            status:obj.elem.checked? 1:0
        }
        top.API.role().save(data,()=>{
            table.reloadData('role-list-id', {
                where: {}, // 数据异步请求时携带的字段集 --- 属性设置有效，因属于数据相关属性
                scrollPos: true, // 设定重载数据或切换分页时的滚动条的位置状态 --- 属性设置有效
                page: {
                    curr: inst.config.page.curr,
                    limit: inst.config.page.limit
                }
            });
        })
    });

}


var formFun = {
    save:(roleTable,closeid)=>{
        let formData = top.tools.form.getFindElementOnObj("#lay-role-form",true);
        if (typeof formData === 'boolean'){
            return;
        }
        if (formData.status && formData.status === 'on' ){
            formData.status = 1;
        }else {
            formData.status = 0;
        }

        top.API.role().save(formData,(res)=>{
            layer.msg(res.message, {icon: 1}, function(){
                // layer.msg('提示框关闭后的回调');
                if (roleTable){
                    table.reloadData('role-list-id', {
                        where: {}, // 数据异步请求时携带的字段集 --- 属性设置有效，因属于数据相关属性
                        scrollPos: true, // 设定重载数据或切换分页时的滚动条的位置状态 --- 属性设置有效
                        page: {
                            curr: roleTable.config.page.curr,
                            limit: roleTable.config.page.limit
                        }
                    });
                }
                if (closeid){
                    layer.close(closeid);
                }
            });
        })
    },
    remove:(data,roleTable)=>{
        top.API.role().del(data,(res)=>{
            layer.msg(res.message, {icon: 1}, function(){
                // layer.msg('提示框关闭后的回调');
                if (roleTable){
                    table.reloadData('role-list-id', {
                        where: {}, // 数据异步请求时携带的字段集 --- 属性设置有效，因属于数据相关属性
                        scrollPos: true, // 设定重载数据或切换分页时的滚动条的位置状态 --- 属性设置有效
                        page: {
                            curr: roleTable.config.page.curr,
                            limit: roleTable.config.page.limit
                        }
                    });
                }
            });
        })
    },
    setValue:(data,eleId)=>{
        data.status = parseInt(data.status);
        form.val(eleId, data);
    }
}

function openResourcesData(roleId){
    top.API.common().loadPage('page/from-component/MenuModule.html',function (response){
        openForm({
            title:"分配资源",
            btn:1,
            save:(closeid,layero,that)=>{
                let data = treeTable.checkStatus('menu-list-id',true).data;
                if (data.length > 0){
                    let menuids = [];
                    layui.each(data,function (index,item){
                        menuids.push({
                            roleId:roleId,
                            menuId:item.id,
                            parentId:item.parentId,
                            name:item.name,
                            icon:item.icon,
                            visible:item.visible,
                            component:item.component,
                            type:item.type,
                            sort:item.sort,
                            permission:item.permission,
                        })
                    })
                    top.API.role().bindResources({
                        id:roleId,
                        menuList:menuids
                    },(res)=>{
                        layer.msg(res.message, {icon: 1},function (){
                            table.reloadData('role-list-id')
                            if (closeid){
                                layer.close(closeid);
                            }
                        })
                    })
                }else {
                    layer.msg("没有选中数据",{icon:2})
                }
            },
            reset:(closeid,layero,that)=>{
                form.val('from-reset-val-filter', top.tools.form.getFindElementOnObj($(layero).find(".search-criteria"),false));
            },
            area:'50%',
            before:(closeid,layero,that)=>{
                $(layero).find('.layui-layer-content').attr("layui-width",$(layero).outerWidth())
                $(layero).find('.layui-layer-content').attr("roleId",roleId)
                $(layero).hide();
                let intervalId = setInterval(()=>{
                    var obj = top.tools.cache.get('resourcesFrom');
                    if (obj && obj.resourcesFrom === 'true'){
                        clearInterval(intervalId);
                        // 获取浏览器视口的高度
                        const viewportHeight = window.innerHeight;
                        var popupHeight = $(layero).outerHeight();
                        var topPosition = (viewportHeight - popupHeight) / 2;
                        $(layero).css('top', topPosition+'px');
                        $(layero).show();
                        top.tools.cache.remove('resourcesFrom')
                    }
                },500)
            }
        },null,response);
    })
}